// pages/index/soundCard/soundCard.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgPath: '', // 输出图片路径
    soundPath: '', // 输出录音路径
    isX: false, // 是否横向显示
    movableH: 0, // 相框高
    movableW: 0, // 相框宽
    imgWidth: 0, // 图片原始宽度
    imgHeight: 0, // 图片原始高度
    dragX: 0, // X轴拖动
    dragY: 0, // Y轴拖动
    scale: 1, // 缩放比例
  },
  onLoad: function (options) {
    let that = this,
      h,
      w
    wx.getImageInfo({ // 获取图片信息
      // src: options.path,
      src:    'http://tmp/wx71db1ff420c826c9.o6zAJs1mHKyxkmtxaF2vS3EfmZv0.RHDODdECQVpv7430b6bd73b4e385cfcbf3f9e7597594.png',
      success: function (res) {
        w = 506
        h = res.height / res.width * w
        that.setData({
          // isX: res.width > res.height ? true : false,
          // imgPath: options.path,
          imgPath: 'http://tmp/wx71db1ff420c826c9.o6zAJs1mHKyxkmtxaF2vS3EfmZv0.RHDODdECQVpv7430b6bd73b4e385cfcbf3f9e7597594.png',
          movableH: h,
          movableW: w,
          imgWidth: res.width,
          imgHeight: res.height
        })
      }
    })
  },
  dragImg(e) { // 拖动
    console.log('1', e.detail)
    this.setData({
      dragX: e.detail.x,
      dragY: e.detail.y
    })
  },
  scaleImg(e) { // 缩放
    console.log('2', e.detail)
    this.setData({
      dragX: e.detail.x,
      dragY: e.detail.y,
      scale: e.detail.scale
    })
  },
  cancel() { // 取消
    wx.navigateBack({})
  },
  confirm() { // 确定
    let that = this,
      h = 391,
      w = 253
    let ctx = wx.createCanvasContext('picBox') // 创建上下文
    console.log(
      this.data.dragX / w * this.data.imgWidth * this.data.scale,
      this.data.dragY / h * this.data.imgWidth * 17 / 11 * this.data.scale,
      this.data.imgWidth * this.data.scale,
      this.data.imgHeight * this.data.scale
      )
    console.log(this.data.dragY, h, 1700)
    ctx.drawImage(
      this.data.imgPath,
      this.data.dragX / w * this.data.imgWidth * this.data.scale,
      this.data.dragY / h * this.data.imgWidth * 17/11 * this.data.scale,
      this.data.imgWidth * this.data.scale,
      this.data.imgHeight * this.data.scale
      )
    ctx.draw() // 绘制
    console.log(this.data.imgPath)
    setTimeout(() => { // 绘制有延迟
      wx.canvasToTempFilePath({
        canvasId: 'picBox',
        destWidth: 1100,
        destHeight: 1700,
        quality: 1,
        success: function (res) {
          console.log(res.tempFilePath)
          // let h,
          //     w,
          //     path = res.tempFilePath
          // wx.getImageInfo({ // 获取图片信息
          //   src: path,
          //   success: function (res) {
          //     w = res.width > res.height ? 680 : 550
          //     h = res.height / res.width * w
          //     that.setData({
          //       isX: res.width > res.height ? true : false,
          //       imgPath: path,
          //       movableH: h,
          //       movableW: w,
          //       imgWidth: res.width,
          //       imgHeight: res.height
          //     })
          //   }
          // })
        }
      })
    }, 500)
  }
})